<template>
	<div class="wrapper">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
			<empty v-if="!list.length"></empty>
			<div class="main_box" v-else>
				<div class="main" v-for="(item,index) in list" :key="index">
					<div class="dia" style="justify-content: space-between;">
						<div class="dia">
							<div class="dis">
								<img src="../../assets/terminal/logo_img.png" alt="" />
							</div>
							<div class="serial">
								终端编号：{{item.terminalSn}}
							</div>
						</div>
						<div class="dis Bound" v-if="item.terminalStatus==2">
							已绑定
						</div>
						<div class="dis Bound Bound_a" v-else-if="item.terminalStatus==1">
							未绑定
						</div>
						<!-- <div class="dis Bound Bound_b" v-if="item.activationStatus==1">
							已唤醒
						</div>
						<div class="dis Bound Bound_b" v-if="item.activationStatus==0">
							未唤醒
						</div> -->
						<div class="dis Bound Bound_c" v-if="item.terminalStatus==3">
							解绑
						</div>
					</div>
					<div class="main_serial" style="margin-top: 4px;">
						代理商编号：{{item.agentNo}}
					</div>
					<div class="main_serial">
						代理商名称：{{item.agentName}}
					</div>
					<div class="main_serial">
						唤醒状态：<span v-if="item.activationStatus==1">已唤醒</span><span v-else>未唤醒</span>
					</div>
				</div>
			</div>
		</van-list>
	</div>
</template>

<script>
	import {
		selectTerListByChannel
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted
	} from 'vue';
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRoute()
			const state = reactive({
				pageStart: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				list: [],
			})
			//获取终端总数
			const getTerminalNum = () => {
				// state.terList = router.query.bindType
				let parames = {
					searchType: router.query.searchType,
					agentNo: router.query.serviceNo
				}
				if (router.query.channelCode != '' && router.query.channelCode != undefined) {
					parames.channelCode = router.query.channelCode
					// parames.agentName = state.agentName
				}
				selectTerListByChannel(
					parames
				).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
						
					}

				})
			}
			//获取数据
			const getList = () => {
				if (router.query.bindType == 'minal') {
					getTerminalNum()
				}
				// 	state.terList = router.query.bindType
				// 	let parames = {
				// 		searchType: store.state.user.agentNo,
				// 		pageStart: state.pageStart,
				// 		pageSize: state.pageSize
				// 	}
				// 	let agentName = {
				// 		agentName: state.agentName
				// 	}
				// 	console.log(state.agentName)
				// 	if (state.agentName != '') {
				// 		Object.assign(parames,agentName)
				// 		// parames.agentName = state.agentName
				// 	}
				// 	selectTerListByChannel(
				// 		parames
				// 	).then(res => {
				// 		if (res.data.records.length != 0) {
				// 			if (res.data.records.length < 10) {
				// 				state.finished = true
				// 				state.loading = false
				// 			} else {
				// 				state.pageStart++
				// 				state.finished = false
				// 				state.loading = false
				// 			}
				// 			state.list = state.list.concat(res.data.records)
				// 		} else {
				// 			state.finished = true
				// 			state.loading = false
				// 		}

				// 	})
			}
			// const getFindPageList = () => {
			//     findSetPosFeeList({
			//         currentPage: state.currentPage,
			//         ...state.childData
			//     }).then(res => {
			//         if (res.object.length < 10) {
			//             state.finished = true
			//             state.loading = false
			//         } else {
			//             state.currentPage++
			//             state.finished = false
			//             state.loading = false
			//         }
			//         state.posList = state.posList.concat(res.object)
			//     })
			// }

			return {
				...toRefs(state),
				getList
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #FFF9F9;
		min-height: 100vh;

		.main_box {
			padding: 1px 18px 0px 18px;
			box-sizing: border-box;

			// margin-top: 10px;
			.main {
				padding: 12px 12px;
				box-sizing: border-box;
				background-color: #fff;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #333333;
				margin-top: 12px;
				.serial {
					margin-left: 10px;
				}

				.main_serial {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 14px;
					color: #333333;
					margin-top: 10px;
					margin-left: 38px;
				}

				.Bound {
					width: 38px;
					height: 18px;
					background: #DFFAE7;
					border-radius: 3px 3px 3px 3px;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 10px;
					color: #37C161;
				}

				.Bound_a {
					background: #FCEAEA;
					color: #FF2828;
				}

				.Bound_b {
					background: #DDECFD;
					color: #006DE5;
				}

				.Bound_c {
					background: #FFECE2;
					color: #F3722C;
				}

				img {
					width: 28px;
					height: 28px;
				}
			}
		}
	}
</style>